<template>
  <div style="margin-top: 20px; height: 100px">
    <transition name="el-fade-in-linear">
      <div v-show="show" class="transition-box">
        <div class="edit">
          <el-breadcrumb
            style="margin: 5px 0px 0px 30px"
            separator-class="el-icon-arrow-right"
          >
            <el-breadcrumb-item :to="{ path: '/userInformation' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/yhgl' }"
              >用户列表</el-breadcrumb-item
            >
            <el-breadcrumb-item>修改</el-breadcrumb-item>
          </el-breadcrumb>
          <ul>
            <li><b>头像&#58;</b><img :src="user.avatarurl" alt="" /></li>
            <li>
              <b>用户昵称&#58;</b><span>{{ user.nickname }}</span>
            </li>
            <li>
              <b>性别&#58;</b><span>{{ user.gender == 0 ? "女" : "男" }}</span>
            </li>
            <li>
              <b>国家&#58;</b><span>{{ user.country }}</span>
            </li>
            <li>
              <b>省&#58;</b><span>{{ user.province }}</span>
            </li>
            <li>
              <b>市&#58;</b><span>{{ user.city }}</span>
            </li>
            <li>
              <b>身份&#58;</b
              ><select name="" id="" v-model="selectOp">
                <option value="0">用户</option>
                <option value="1">商家</option>
                <option value="2">管理员</option>
              </select>
            </li>
            <li><b>电话&#58;</b><input type="text" v-model="user.phone" /></li>
            <li><b>密码&#58;</b><input type="text" v-model="user.verifycode" /></li>
            <li style="">
              <button :plain="true" class="btnEd" @click="edit">修改</button>
            </li>
          </ul>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {},
      show: false,
      selectOp: null,
      cUser: {},
    };
  },
  mounted() {
    this.user = this.$route.query.scope;
    this.selectOp = this.user.identity;
    this.show = true;
    console.log(this.$route.query.scope);
  },
  methods: {
    open1() {
      this.$message({
        message: "恭喜你，修改成功！",
        type: "success",
      });
    },
    open2() {
      this.$message({
        showClose: true,
        message: "错了哦，请稍后重试！",
        type: "error",
      });
    },
    edit() {
      let that = this;
      this.cUser = JSON.parse(window.sessionStorage.getItem("user"));
      let userId = that.cUser.userId;
      let userToken = that.cUser.token;

      // 发起修改
      this.$http
        .get(
          "FoodWeb/modifyUserAction.action",
          {
            params: {
              phone: that.user.phone,
              verifycode: that.user.verifycode,
              identity: that.selectOp,
              aimuserid: that.user.userId,
              userid: userId,
              token: userToken,
            },
          },
          { dataType: "json" }
        )
        .then((res) => {
          if (res.data.errorcode == 0) {
            that.open1();
          } else {
            that.open2();
          }
        });
    }
  },
};
</script>
<style lang="less" scoped>
.edit {
  ul {
    width: 400px;
    margin: 50px auto;
    display: flex;
    flex-direction: column;
    li {
      margin-top: 20px;
      display: flex;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.062);
      b {
        width: 110px;
        margin-right: 80px;
      }
    }
    img {
      width: 100px;
    }
    .btnEd {
      margin: 0px auto;
      color: white;
      background-color: #008000;
      width: 70px;
      border-color: #c3c3c3;
      border-radius: 0.3em;
    }
  }
}
</style>